﻿<div id="search-form" data-bind="validationOptions: { insertMessages: false }">
    <h2>This is a search form</h2>

    <div data-bind="foreach: products">
        <div class="row">
            <div class="large-6 columns">
                <div class="row collapse">
                    <label for="p-name">
                        Product name
                    </label>
                    <input type="text" id="p-name" data-bind='value: productName' />
                    <small class="error" data-bind="validationMessage: productName"></small>
                </div>
            </div>
            <div class="large-6 columns">
                <div class="row collapse">
                    <label for="price">
                        Product price
                    </label>
                    <input type="text" id="price" data-bind='value: price' />
                    <small class="error" data-bind="validationMessage: price"></small>
                </div>
            </div>
        </div>
    </div>
    <button data-bind='click: search'>
        Search
    </button>
    <div id="result-grid">
        <button class="tiny secondary success" data-bind='click: sortByName, enable: sortedNameDesc() == false'>
            Sort by name
        </button>

        <button class="tiny secondary success" data-bind='click: sortByNameAsc, enable: sortedNameAsc() == false'>
            Sort by name asc
        </button>

        <button class="tiny secondary success" data-bind='click: sortByPrice, enable: sortedPriceDesc() == false'>
            Sort by price
        </button>

        <button class="tiny secondary success" data-bind='click: sortByPriceAsc, enable: sortedPriceAsc() == false'>
            Sort by price asc
        </button>

        <button class="tiny secondary success" data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
            Jump to first page
        </button>

        <div data-bind='simpleGrid: gridViewModel'>
        </div>
    </div>
</div>
